<template>
	<!-- 小程序头部兼容 -->
	<!-- #ifdef MP -->
	<view>
		<view class="mp-search-box">
			<view class="state-bar" :style="{height:height+'px'}"></view>
			<view class="nav-bar">
				<view @click="goHistory" class="icon-lishi"></view>
				<input @click="searchInputClicked" class="ser-input" type="text" value="输入关键字搜索" disabled />
			</view>

		</view>
		<view :style="{height:height+'px','margin-bottom': '50px'}"></view>
	</view>
	<!-- #endif -->

</template>

<script>
	// #ifdef MP
	export default {
		data() {
			return {
				height: 0, //获取的状态栏高度
			};
		},
		created() {
			var _this = this;
			// 获取手机状态栏高度
			uni.getSystemInfo({
				success: function(data) {
					// 将其赋值给this
					_this.height = data.statusBarHeight;
				}
			})
		},
		methods:{
			goHistory(){
				uni.navigateTo({
					url:'../history/history'
				})
			},
			searchInputClicked(){
				uni.navigateTo({
					url:'../search/search'
				})
			}
		}
	}
	// #endif
</script>

<style scoped>
	/* #ifdef MP */
	@font-face {
		font-family: 'iconfont';
		src: url('../static/font/iconfont.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	.icon-lishi {
		font-family: "iconfont" !important;
		font-size: 30px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #FFFFFF;
		margin: 0 20rpx;
	}

	.icon-lishi:before {
		content: "\e602";
	}


	.mp-search-box {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
		width: 100%;
		background-color: #d81e06;
		display: flex;
		flex-wrap: wrap;
	}

	.state-bar {
		width: 100%;

	}

	.nav-bar {
		width: 100%;
		display: flex;
		padding: 5px 0px 10px 0px;
	}

	.ser-input {
		width: 400rpx;
		height: 35px;
		line-height: 35px;
		text-align: center;
		font-size: 28rpx;
		color: #606266;
		border-radius: 60px;
		background: rgba(255, 255, 255, .6);
	}
	/* #endif */
</style>
